<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" type="text/css">
    <script th:src="@{/bootstrap/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
    <title>收益计算器</title>
    <style>
        .calculator-dialog-result {
            height: 30px;
            line-height: 30px;
            padding-left: 28px;
            /* display: none; */
        }

        .calculator-dialog-content span {
            display: inline-block;
        }

        h5 {
            height: 28px;
            line-height: 28px;
            border-top: 1px solid #ddd;
            color: #000;
            padding-left: 28px;
            padding-top: 10px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div id="app">
    <form class="form-horizontal" style="padding: 20px 50px">
        <div class="form-group">
            <label class="col-xs-4 control-label" for="investMoney">项 目 金 额：</label>
            <div class="col-xs-8">
                <div class="input-group">
                    <input class="form-control" id="investMoney" type="text" v-model="investMoney">
                    <div class="input-group-addon">元</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label" for="rate">年化收益率：</label>
            <div class="col-xs-8">
                <div class="input-group">
                    <input class="form-control" id="rate" type="text" v-model="rate">
                    <div class="input-group-addon">%</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label" for="repayType">还 款 方 式：</label>
            <div class="col-xs-8">
                <select class="form-control" id="repayType" v-model="repayType">
                    <option value="1">到期还本付息</option>
                    <option value="2">按月付息，到期还本</option>
                    <option value="3">等额本息</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-4 control-label" for="lockDateMonth">项 目 期 限：</label>
            <div class="col-xs-8">
                <div class="input-group">
                    <input class="form-control" id="lockDateMonth" type="text" v-model="lockDateMonth">
                    <div class="input-group-addon">月</div>
                </div>
            </div>
        </div>
        <h5>结 果 描 述：</h5>
        <div class="calculator-dialog-result">本 息 总 计：<span>{{totalReturn}}</span>元</div>
        <div class="calculator-dialog-result">应 收 利 息：<span>{{profit}}</span>元</div>
        <div class="calculator-dialog-result" style="display: none">每月应收利息：<span>{{oneMonthProfit}}</span>元</div>
        <div class="calculator-dialog-result" style="display: none">每月应收本息：<span>{{oneMonthPrincipalAndProfit}}</span>元</div>
        <div class="calculator-dialog-result" style="display: none">您将在最后一个月获得：<span>{{lastMonthGetMoney}}</span>元</div>
    </form>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            investMoney: 5000,
            rate: 13,
            lockDateMonth: 1,
            repayType: 1,
            totalReturn: 0, //本息总计
            profit: 0, //收益
            oneMonthProfit: 0, //每月应收利息
            oneMonthPrincipalAndProfit: 0, //每月应收本息
            lastMonthGetMoney: 0 //最后一个月获得
        },
        watch: {
            //监听投资金额
            investMoney: function (val) {
                if (val == '') {
                    this.totalReturn = 0;
                    this.profit = 0;
                    this.oneMonthProfit = 0;
                    this.lastMonthGetMoney = 0;
                    this.oneMonthPrincipalAndProfit = 0;
                    return;
                }

                let check = /^\d+$/;
                if (!check.test(val)) {
                    layer.msg('只能输入正整数', {
                        icon: 0
                    });
                    this.investMoney = 5000;
                    val = 5000;
                }
                this.investMoney = val;
                this.totalReturn = parseFloat((val * (this.rate / 100) / 12 * this.lockDateMonth).toFixed(2)) + parseInt(val);
                this.profit = (val * (this.rate / 100) / 12 * this.lockDateMonth).toFixed(2);
                this.oneMonthProfit = (this.profit / this.lockDateMonth).toFixed(2);
                this.lastMonthGetMoney = parseInt(this.investMoney) + parseFloat(this.oneMonthProfit);
                this.oneMonthPrincipalAndProfit = (this.totalReturn / this.lockDateMonth).toFixed(2);
            },
            //监听年化收益率
            rate: function (val) {
                if (val < 0) {
                    layer.msg('只能输入正数', {
                        icon: 0
                    });
                    this.rate = 13;
                    val = 13;
                }
                this.rate = val;
                this.totalReturn = parseFloat((this.investMoney * (val / 100) / 12 * this.lockDateMonth).toFixed(2)) + parseInt(this.investMoney);
                this.profit = (this.investMoney * (val / 100) / 12 * this.lockDateMonth).toFixed(2);
                this.oneMonthProfit = (this.profit / this.lockDateMonth).toFixed(2);
                this.lastMonthGetMoney = parseInt(this.investMoney) + parseFloat(this.oneMonthProfit);
                this.oneMonthPrincipalAndProfit = (this.totalReturn / this.lockDateMonth).toFixed(2);
            },
            //监听项目期限
            lockDateMonth: function (val) {
                if (val == '') {
                    this.totalReturn = 0;
                    this.profit = 0;
                    this.oneMonthProfit = 0;
                    this.lastMonthGetMoney = 0;
                    this.oneMonthPrincipalAndProfit = 0;
                    return;
                }

                let check = /^\d+$/;
                if (!check.test(val)) {
                    layer.msg('只能输入正整数', {
                        icon: 0
                    });
                    this.lockDateMonth = 1;
                    val = 1;
                }
                this.lockDateMonth = val;
                this.totalReturn = parseFloat((this.investMoney * (this.rate / 100) / 12 * val).toFixed(2)) + parseInt(this.investMoney);
                this.profit = (this.investMoney * (this.rate / 100) / 12 * val).toFixed(2);
                this.oneMonthProfit = (this.profit / this.lockDateMonth).toFixed(2);
                this.lastMonthGetMoney = parseInt(this.investMoney) + parseFloat(this.oneMonthProfit);
                this.oneMonthPrincipalAndProfit = (this.totalReturn / this.lockDateMonth).toFixed(2);
            },
            //还款方式
            repayType: function (val) {
                if (val == 1) {
                    $('.calculator-dialog-result').eq(2).hide();
                    $('.calculator-dialog-result').eq(3).hide();
                    $('.calculator-dialog-result').eq(4).hide();
                } else if (val == 2) {
                    $('.calculator-dialog-result').eq(2).show();
                    $('.calculator-dialog-result').eq(3).hide();
                    $('.calculator-dialog-result').eq(4).show();
                } else if (val == 3) {
                    $('.calculator-dialog-result').eq(2).hide();
                    $('.calculator-dialog-result').eq(3).show();
                    $('.calculator-dialog-result').eq(4).hide();
                }
            }
        },
        methods: {},
        mounted() {
            this.totalReturn = parseFloat((this.investMoney * (this.rate / 100) / 12 * this.lockDateMonth).toFixed(2)) + parseInt(this.investMoney);
            this.profit = (this.investMoney * (this.rate / 100) / 12 * this.lockDateMonth).toFixed(2);
            this.oneMonthProfit = (this.profit / this.lockDateMonth).toFixed(2);
            this.lastMonthGetMoney = parseInt(this.investMoney) + parseFloat(this.oneMonthProfit);
            this.oneMonthPrincipalAndProfit = (this.totalReturn / this.lockDateMonth).toFixed(2);
        }
    });
</script>
</body>
</html>
